<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<script src="/lib/vue.global.js"></script>
	<script src="/lib/vue-router.global.js"></script>
	<script src="/lib/vuex.global.js"></script>
	<script src="/lib/common.js"></script>
	<style>
		body {
			margin: 0;
		}

		html,
		body,
		#app {
			height: 100%;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		ul {
			padding: 0;
		}

		li {
			list-style-type: none;
		}

		li:hover {
			background: #efecec;
		}

		.mode{
			width:100%;
			height:100%;
			position:fixed;
			top:0;
			left:0;
			background:black;
		}
		.mode-body{
			width:500px;
			height:500px;
			margin: auto;
			background-color: white;
			margin-top: 10px;
			border-radius: 5px;
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak style="max-width: 500px;border:1px solid black;margin:auto;">
		<router-view></router-view>
	</div>
</body>
<script type="module">
	const routes = [
		{
			path: '/', redirect:"message", component: () => import('./view/index.js'),
			children: [
				{
					path: "/message", name: "message", component: () => import('./view/message.js')
				},
				{
					path: "/member", name: "member", component: () => import('./view/member.js')
				},
				{
					path: "/member-message", name: "member-message", component: () => import('./view/member-message.js')
				},
				{
					path: "/group-message", name: "group-message", component: () => import('./view/group-message.js')
				},
				{
					path: "/group", name: "group", component: () => import('./view/group.js')
				},
				{
					path: "/group-info", name: "group-info", component: () => import('./view/group-info.js')
				},
				{
					path: "/me", name: "me", component: () => import('./view/me.js')
				}
			]
		},
		{
			path: "/login", name: "login", component: () => import('./view/login.js')
		},
		{
			path: "/register", name: "register", component: () => import('./view/register.js')
		}
	]

	const router = VueRouter.createRouter({
		history: VueRouter.createWebHashHistory(),
		routes,
	})

	const app = Vue.createApp({})

	let store = Vuex.createStore({
		state: {
			member:null,
			socketLocal: null,
			socketGroup: {},
			socketMember: null,
			groupMap:{},
			groupMessageList:{},
			memberMap:{},
			memberMessageList:{},
		}
	})

	router.afterEach((to) => {
	})

	app.use(router)
	app.use(store)
	app.mount('#app')
</script>

</html>